<template>
  <div class="ground">
    <h1 class="in">根组件 <!--在提供了mapSate 后不需要这么长的属性 可以直接改为{{title}} --> <!-- {{ $store.state.title }} 在没有配置辅助函数时使用--> {{ title }}</h1>
    <input class="in" :value="count" @input="handleInput">
    
    <div>
      <br>
    <SOn1></SOn1>
    <br>
    <SOn2></SOn2>
  </div>
  </div>
</template>
<script>
import SOn1 from './components/SOn1.vue';
import { mapState } from 'vuex';
import SOn2 from './components/SOn2.vue';
console.log(mapState(['count ']))

export default {
  name:'APP',
  components : {
    SOn1:SOn1,
    SOn2:SOn2
  },
 /*  //验证仓库是否安装成功
  created (){
    console.log (this.$store)
  }, */
  computed:{
    //...是展开运算符
    ...mapState(['count','title'])
  },
  methods: {
    handleInput(e){
      //实时获得输入框的值
    const num = +e.target.value
    this.$store.commit('change',num)
      //提交 mutation 调用 mutation 函数
    }
   
  }
}
</script>
<style>
.ground{
  border : 1px solid rgb(108, 107, 105);
  width: 400px;

}
.in {
  margin-left: 20px;
}
</style>